<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <search-bar class="search">
      <template slot="peopleSearch">
        <el-form ref="form" :model="form" label-width="80px" class="form">
          <el-row type="flex">
            <el-form-item label="商品搜索:">
              <el-col :span="24">
                <el-input
                  v-model="form.skuName"
                  placeholder="请输入"
                  class="input"
                  @keyup.native.enter="searchGoods"
                  @input="focusInp"
                  @blur="blurInp"
                >
                  <i slot="suffix" :class="{'el-input__icon el-icon-circle-close':inpFocus}" @click="emptyInp" />
                </el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col class="searchButton">
                <el-button type="primary" class="CXButton" @click="searchGoods">
                  <i class="el-icon-search" />搜索</el-button>
              </el-col>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
    </search-bar>
    <!-- 搜索框 -->
    <!-- 列表框 -->
    <el-card>
      <!-- 新增、导入按钮 -->
      <el-row class="addButton">
        <el-col>
          <el-button type="warning" size="mini" @click="isShowDialog = true">
            <i class="el-icon-circle-plus-outline" /> 新增</el-button>
          <el-button type="primary" size="mini" @click="$router.push('/sku/import')">
            <i class="el-icon-upload" /> 导入数据</el-button>
        </el-col>
      </el-row>
      <!-- 表格表单 -->
      <el-table
        :data="goods"
        style="width: 100% "
        stripe
        :row-style="{height: '10'}"
        :cell-style="{padding: '10'}"
        :header-cell-style="{color:'#000',background:'#f3f6fb'}"
      >
        <el-table-column
          label="序号"
          width="100"
          align="center"
        >
          <template v-slot="{$index}">
            {{ $index+1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="skuName"
          label="商品名称"
          width="100"
        />
        <el-table-column
          prop="skuImage"
          label="商品图片"
          width="100"
        >
          <template v-slot="{row}">
            <img :src="row.skuImage" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="brandName"
          label="品牌"
          width="120"
        />
        <el-table-column
          prop="unit"
          label="规格"
          width="120"
        />
        <el-table-column
          prop="price"
          label="商品价格"
          width="120"
        />
        <el-table-column
          prop="skuClass.className"
          label="商品类型"
          width="100"
        />
        <el-table-column
          prop="createTime"
          label="创建日期"
          width="100"
        >
          <template v-slot="{row}">{{ row.createTime | formatDate }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template v-slot="{row}">
            <el-button type="text" @click="editGoods(row)">修改</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 更换页面 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
          :total="+total"
          :current-page="searchConfig.pageIndex"
          :page-size="searchConfig.pageSize"
          background
          @current-change="currentChange"
        />
      </el-row>
      <!-- 表格表单 -->
    </el-card>
    <!-- 列表框 -->
    <!-- 添加编辑弹框 -->
    <add-goods
      ref="goodsForm"
      :is-show-dialog="isShowDialog"
      @closeDialog="closeDialog"
    />
    <!-- 添加编辑弹框 -->
    <!-- 导入弹窗 -->
    <!-- <el-dialog :visible="isShowImport" width="30%" title="数据导入" @close="isShowImport =false">
      <el-form>
        <el-form-item label="标题：" style="width=80%" label-width="125px">
          <el-button type="primary" size="small" @click="">
            <i class="el-icon-upload" />
            上传文件     </el-button>
        </el-form-item>
        <el-form-item>
          <div align="middle">支持扩展名：xls、xlsx，文件不得大于1M</div>
        </el-form-item>
        <el-form-item align="middle">
          <el-button type="success" size="small" @click="importGoods"> 确认 </el-button>
          <el-button type="info" size="small" @click="isShowImport = false"> 取消 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
    <!-- 导入弹窗 -->
  </div>
</template>

<script>
import { getGoodsAPI } from '@/api/goods'
import AddGoods from '@/views/sku/add-goods.vue'
export default {
  components: { AddGoods },
  data() {
    return {
      form: {
        skuName: '',
        classId: ''
      },
      goodsInfo: {},
      // 商品
      goods: [],
      // 渲染页
      searchConfig: {
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      isShowDialog: false,
      // isShowImport: false,
      inpFocus: false
    }
  },
  computed: {

  },
  created() {
    this.getGoods()
  },
  methods: {
    // 获取商品
    async getGoods() {
      const res = await getGoodsAPI(this.searchConfig)
      this.goods = res.data.currentPageRecords
      this.total = res.data.totalCount
      // this.searchConfig.pageIndex = +res.data.pageIndex
      // this.searchConfig.pageSize = +res.data.pageSize
    },
    // 翻页
    currentChange(newPage) {
      this.searchConfig.pageIndex = newPage
      if (!this.form) {
        this.getGoods()
      } else {
        this.searchGoods()
      }
    },
    // 关闭弹框，刷新页面
    closeDialog() {
      this.isShowDialog = false
      this.getGoods()
    },
    // 数据回显，打开弹窗
    editGoods(data) {
      this.$refs.goodsForm.getGoodsInfo(data)
      this.isShowDialog = true
    },
    // 查询商品
    async searchGoods() {
      if (!this.form) {
        this.getGoods()
      } else {
        const res = await getGoodsAPI({ ...this.form, ...this.searchConfig })
        this.goods = res.data.currentPageRecords
        this.total = res.data.totalCount
      }
    },
    // 导入数据
    importGoods() {

    },
    // 清空输入表单
    emptyInp() {
      this.form.skuName = ''
    },
    // 失焦input
    blurInp() {
      setTimeout(() => {
        this.inpFocus = false
      }, 200)
    },
    // 聚焦input
    focusInp() {
      if (this.form.skuName) {
        this.inpFocus = true
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.search{
width: 100%;
.searchButton{
  margin-left:-80px;
}

}
.addButton{
  margin-bottom: 20px;
}
img{
  display: block;
    width: 24px;
    height: 24px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
    background: #f3f6fb;
    border: 1px solid #f3f6fb;
}
.el-button--primary{
  width: 160px;
}
</style>
